<template>
  <h1>发微博页面</h1>
  <div style="width: 500px;margin: 0 auto;">
    <el-input placeholder="微博正文" v-model="weibo.content"></el-input>
    <!--  图片上传开始  -->
    <el-upload
        v-model:file-list="fileList"
        action="http://localhost:8080/v1/upload"
        name="file"
        limit="9"
        list-type="picture-card"
        :on-preview="handlePictureCardPreview"
        :on-remove="handleRemove"
    >
      <el-icon><Plus /></el-icon>
    </el-upload>

    <el-dialog v-model="dialogVisible">
      <img w-full :src="dialogImageUrl" alt="Preview Image" />
    </el-dialog>
    <!--  图片上传结束  -->

    <!-- @click="post" 如果post方法不传参,后面的小括号可以省略不写   -->
    <el-button type="primary" @click="post"
    style="width: 100px;margin:10px;font-weight:bold;">发布</el-button>
  </div>
</template>

<script setup>
  import {ref} from "vue";
  import router from "@/router";
  import qs from "qs";
  import axios from "axios";
  import {ElMessage} from "element-plus";
  import { Plus } from '@element-plus/icons-vue'

  //图片上传开始
  const fileList = ref([])
  const dialogImageUrl = ref('')
  const dialogVisible = ref(false)

  const handleRemove = (uploadFile, uploadFiles) => {
    console.log(uploadFile, uploadFiles)
    //1.得到要删除的图片路径 uploadFile就是我们要删除的那个图片文件对象
    let imgUrl = uploadFile.response.data;
    //2.给后端发请求,删除图片
    axios.post('http://localhost:8080/v1/remove?imgUrl='+imgUrl)
        .then((response)=>{
          if (response.data.code==2002){
            ElMessage.success('删除成功!');
          }
        })
  }
  const handlePictureCardPreview = (uploadFile) => {
    dialogImageUrl.value = uploadFile.url
    dialogVisible.value = true
  }
  //图片上传结束
  const weibo = ref({content:''});
  const post = ()=>{
    //得到当前登录的用户信息,因为user对象只给下面的JS代码使用,所以无需定义为响应式变量
    let user = getUser();
    //如果用户信息为空,提示并跳转至登录页,注意需要使用return关键字结束post方法
    if (user == null){
      alert('请先登录!');
      router.push('/login');
      return;
    }
    //判断是否上传图片
    if (fileList.value.length > 0){//说明用户传图片了
      let imgUrls = [];//准备数组,用来存多张图片路径
      for (let file of fileList.value){//遍历响应式数组
        //依次遍历得到每个文件的响应路径
        let imgUrl = file.response.data;
        //每得到一个路径,就存入imgUrls数组中
        imgUrls.push(imgUrl);
        // /2024/05/17/2aee3eff-4f2b-42cf-bb12-db992d56378b.png,/2024/05/17/03229ac5-c83b-4a30-ac08-69dc532410d1.jpg
      }
      //循环结束,得到所有的图片路径,将路径赋值给weibo对象,一起发给后端新增微博
      weibo.value.imgUrls = imgUrls.toString();
    }
    //给微博对象设置作者id 注意:JS属性可以动态添加!
    weibo.value.userId = user.id;
    //将JS对象转为查询字符串格式
    let data = qs.stringify(weibo.value);
    console.log(data);
    //给后端发送请求
    axios.post('http://localhost:8080/v1/weibos/add-new',data)
        .then((response)=>{
          if (response.data.code==2002){
            ElMessage.success('发布成功!');
            router.push('/');
          }
        });
  }

</script>

<style scoped>

</style>